<template>
  <div class="question-box">
    <div>
      <table>
        <thead>
        <tr>
          <td style="background-color: rgba(255,61,61,0.5)">未回复问题</td>
        </tr>
        <tr class="tr_head">
          <td class="widther">提问内容</td>
          <td>提问人</td>
          <td>提问时间</td>
          <td>回复问题</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in tableData">
          <td class="widther">{{item.id}}</td>
          <td>{{item.type}}</td>
          <td>{{item.level}}</td>
          <td>
            <span class="answer" @click="answer">
              <i class="el-icon-chat-dot-round"></i>
            </span>
          </td>
        </tr>
        <tr>
          <div class="more_btn"
               @click="toMore">
            <div style="display: inline-block">查看更多</div>
            <span>></span>
          </div>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Questions",
    methods: {
      toMore() {
        this.$router.replace('/')
      },
      answer(){
        alert("你正在回复..")
      }
    },
    data() {
      return {
        // id:编号、type:
        tableData: [{
          id: 'a1002',
          type: '王小虎',
          level: '三级',
          company: '成都四川无限公司'
        },
          {
            id: 'c1102',
            type: '王小虎',
            level: '三级',
            company: '成都四川无限公司'
          },
          {
            id: 'b2312',
            type: '王小虎',
            level: '三级',
            company: '成都四川无限公司'
          },
          {
            id: 'd1123',
            type: '王小虎',
            level: '三级',
            company: '成都四川无限公司'
          },
        ]
      }
    },

  }
</script>

<style scoped>
  * {
    margin: 0 auto;
    padding: 0;
    cursor: default;
  }

  .question-box {
    width: 1180px;
    height: 320px;
    margin: 20px 0 20px 0;
  }

  table, thead, tbody, tr, td {
    width: 100%;
    text-align: center;
  }

  tr {
    display: flex;
    line-height: 40px;
  }

  tbody tr:hover td{
    background-color: #1688ff;
  }

  td {
    flex: 1;
    width: 100%;
    margin: 5px;
    background-color: rgba(37, 80, 174, 0.55);
  }

  .widther {
    flex: 2;
  }

  .tr_head {
    font-weight: 800;
  }

  .more_btn {
    text-align: center;
    width: 150px;
    line-height: 50px;
    background-color: #014DFF;
    cursor: default;
    margin: 10px auto;
  }

  .answer {
    display: inline-block;
    width: 40px;
    height: 40px;
    /*background: url("./src/assets/delete.png") no-repeat;*/
    cursor: pointer;
  }
</style>
